<template>
	<view style="position: relative;height:100vh">
		<u-navbar title='修改密码' left-icon-color="white" :autoBack="true" :titleStyle="{color:'white'}" bgColor="transparent"
			:placeholder="true"></u-navbar>
		<image src="http://qiniuapplet.jiachuangnet.com/baoxiao.png"
			style="width:750rpx;height: 410rpx;position: absolute;top:0;left:0"></image>
		<view style="width:700rpx;min-height:160rpx;position: absolute;top:200rpx;left:25rpx;">
			<view class="list">
				<view class="flex">
					<view class="label"><text style="color:red;margin-right: 10rx;">*</text><text>旧密码</text></view>
					<u-input placeholder="请输入旧密码" clearable  type="password" v-model='oldPwd' inputAlign="right"></u-input>
				</view>
				<view class="flex">
					<view class="label"><text style="color:red;margin-right: 10rx;">*</text><text>新密码</text></view>
					<u-input placeholder="请输入新密码" clearable  type="password" v-model='newPwd' inputAlign="right"></u-input>
				</view>
				<view class="flex">
					<view class="label"><text style="color:red;margin-right: 10rx;">*</text><text>确认密码</text></view>
					<u-input placeholder="请输入新密码" clearable type="password" v-model='verifyPwd' inputAlign="right"></u-input>
				</view>
			</view>
			<view style="margin-top:30rpx;color:#999;font-size: 24rpx;">请检查密码无误后，再修改！</view>
		</view>
		<view style="width:700rpx;position: absolute;bottom:100rpx;left: 25rpx;">
			<u-button type="primary" shape="circle" @click="updatePwdFn">修改</u-button>
		</view>
	</view>
</template>
<script>
	export default{
		data(){
			return{
				oldPwd:'',
				newPwd:'',
				verifyPwd:'',
			}
		},
		methods:{
			updatePwdFn(){
				if(!this.validatePass ()) return
				let params = {
					oldPwd: this.oldPwd,
					newPwd: this.newPwd,
					verifyPwd: this.verifyPwd
				}
				uni.$u.http.post('/user/updatePassword', params).then(res => {
					uni.$u.toast('密码修改成功,请重新登录')
					this.logOut()
				})
			},
			logOut() {
				uni.$u.http.post('/user/logout', ).then(res => {
					    
					uni.removeStorage({
						key: 'token'
					})
					uni.navigateTo({
						url: '/pages/login/index'
					})
				})
			},
			validatePass (){
				if( this.oldPwd.toString().length===0){
					uni.$u.toast('请输入旧密码')
					return false
				}else if(this.newPwd.toString().length===0){
					uni.$u.toast('请输入新密码')
					return false
				}else if( this.oldPwd.toString()===this.newPwd.toString()){
					uni.$u.toast('新旧密码不能一致')
					return false
				}else if( this.verifyPwd.toString().length===0){
					uni.$u.toast('请输入确认密码')
					return false
				}else if(this.verifyPwd.toString()!==this.newPwd.toString()){
					uni.$u.toast('两次输入的密码不一致')
					return false
				}else{
					return true
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.flex {
		display: flex;
		align-items: center;
	}
	.list {
		width: calc(100%);
		background-color: white;
		border-radius: 16rpx;
		margin-top: 57rpx;
	}
	.list>view{
		padding:20rpx;
		border-bottom: 1rpx solid #E5E5E5;
	}
	.label{
		width: 140rpx;
		color:#333;
		font-size: 28rpx;
	}
	.list>view:nth-last-child(1){
		border-bottom: none;
	}
</style>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>